<!-- 设备的详情页 -->
<template>
	<view>

		<u-navbar height="60" bgColor="#0081ff">
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-nav-slot margin-top-xl" slot="left">
			</view>
			<!-- #endif -->
			<view slot="center" class="u-nav-slot" style="display: flex; flex-direction: column;align-items: center;">
				<view style=" font-size: 20px; color: #FFFFFF;">{{device.deviceName}}</view>
			</view>
		</u-navbar>

		<view class="flex bg-white margin-top-xs" style="height: 25vh;">

			<view class="flex-sub align-center justify-center" style="display: flex;flex-direction: column;">
				<image class="round" style="width: 12vh;height: 12vh;" :src=" imgUrl + device.image">
				</image>
				<text class="text-center margin-top-xl text-blue" @tap="updateIcon">更改图标</text>
			</view>

			<view class="flex-twice margin-left-sm justify-center" style="display: flex;flex-direction: column;">

				<view class="margin-sm align-center" style="display: flex;flex-direction: row;">
					<text class="text-sm justify-start">设备名：{{device.deviceName}}</text>
					<view v-if="shareDevice == 'false'" class="cuIcon-write margin-left-xl" @tap="updateName">
					</view>
				</view>

				<view class="margin-sm">
					<text class="text-sm" selectable="true" user-select="true"> 设备ID：{{device.deviceId}}</text>
				</view>
				<view class="margin-sm">
					<text class="text-sm" selectable="true" user-select="true"
						v-if="shareDevice == 'false'">设备KEY：{{device.deviceKey}}</text>
					<text class="text-sm" selectable="true" user-select="true"
						v-if="shareDevice == 'true'">设备KEY：****************</text>
				</view>
			</view>
		</view>

		<view class="cu-list menu margin-top margin-left-sm margin-right-sm  xl-border radius"
			@tap="shareDevice == 'false' ? toShare(device.deviceId,device.deviceName,device.shareStatus): tip()">
			<view class="cu-item arrow">
				<view class="content flex align-center">
					<view class="flex flex-direction margin-left-sm">
						<text class="text-black text-xl">设备共享</text>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-list menu margin-top margin-left-sm margin-right-sm  xl-border radius"
			@tap="shareDevice == 'false'? toTask(device.deviceId,device.deviceName):tip()">
			<view class="cu-item arrow">
				<view class="content flex align-center">
					<view class="flex flex-direction margin-left-sm">
						<text class="text-black text-xl">定时任务</text>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-list menu margin-top margin-left-sm margin-right-sm  xl-border radius"
			@tap="shareDevice == 'false' ? toConnect(device.deviceId,device.deviceName):tip()">
			<view class="cu-item arrow">
				<view class="content flex align-center">
					<view class="flex flex-direction margin-left-sm">
						<text class="text-black text-xl">运行记录</text>
					</view>
				</view>
			</view>
		</view>

		<view class="flex  justify-center cu-bar tabbar bg-white shadow foot">
			<view class="text-red text-xl" @tap="delDevice">解除设备</view>
		</view>

		<!-- 更新设备名称模态框 -->
		<view class="cu-modal" :class="updateNameModel=='updateNameModel'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改设备名</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="cu-form-group">
					<input class="text-left padding-lr-xl my-input" v-model="device.deviceName"
						placeholder="输入新设备名称"></input>
				</view>

				<view class="cu-bar bg-white margin-top-sm"
					style="display: flex;justify-content: center;border: #8799A3 solid 3rpx;">
					<view class="text-blue text-xxl" style="flex-grow: 1;" @tap="hideModal">取消</view>
					<view class="text-blue text-bold text-xxl" style="flex-grow: 1;border-left: #888888 solid 5rpx;"
						@tap="saveName">确定</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: this.imgUrl,
				shareDevice: false,
				device: {
					deviceId: null,
					deviceName: null
				},
				updateNameModel: null,
			}

		},
		onLoad: function(option) {
			this.device.deviceId = option.deviceId
			this.shareDevice = option.isShare
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.$http.request({
					url: 'app/device/info/' + this.device.deviceId,
					method: 'GET',
					success: (data) => {
						if (data.data && data.data.code == 0) {
							this.device = data.data.device
						}
					}
				})
			},
			//显示更改设备名称模态框
			updateName() {
				this.updateNameModel = "updateNameModel"
			},
			//关闭更改设备名称模态框
			hideModal() {
				this.updateNameModel = null
			},
			//保存设备名称
			saveName() {
				let that = this
				this.$http.request({
					url: 'app/device/update',
					method: 'POST',
					data: {
						"deviceId": that.device.deviceId,
						"deviceName": that.device.deviceName,
					},
					success: (data) => {
						if (data.data && data.data.code == 0) {
							that.updateNameModel = null
						}
					}
				})
			},
			// 删除设备
			delDevice() {
				let that = this
				uni.showModal({
					content: '【解除】危险操作，是否继续！',
					success: function(res) {
						if (res.confirm) {
							if (that.shareDevice == 'true') {
								// 被共享用户的删除用户
								that.$http.request({
									url: 'app/share/deleteByDeviceId',
									method: 'GET',
									data: {
										'deviceId': that.device.deviceId,
									},
									success: (data) => {
										if (data.data && data.data.code == 0) {
											uni.reLaunch({
												url: "/pages/index/index"
											})
										}
									}
								})
							} else {
								// 用户的删除用户
								that.$http.request({
									url: 'app/device/delete',
									method: 'GET',
									data: {
										'deviceIds': that.device.deviceId,
									},
									success: (data) => {
										if (data.data && data.data.code == 0) {
											uni.reLaunch({
												url: "/pages/index/index"
											})
										}
									}
								})
							}
						} else if (res.cancel) {}
					}
				})

			},
			//更新图标
			updateIcon() {
				if (this.shareDevice == 'true') { // 判断是共享设备还是自己创建的设备
					uni.showToast({
						title: '没有相关权限！',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/image/icon?deviceId=' + this.device.deviceId
				})
			},

			// 跳转到共享
			toShare(deviceId, deviceName, shareStatus) {
				uni.navigateTo({
					url: '/pages/share/share?deviceId=' + deviceId +
						"&deviceName=" + deviceName +
						"&shareStatus=" + shareStatus
				})
			},

			// 跳转到定时任务
			toTask(deviceId, deviceName) {
				uni.navigateTo({
					url: '/pages/task/task?deviceId=' + deviceId + "&deviceName=" + deviceName
				})
			},

			// 跳转到运行记录
			toConnect(deviceId, deviceName) {
				uni.navigateTo({
					url: '/pages/connectLog/connectLog?deviceId=' + deviceId + "&deviceName=" + deviceName
				})
			},
			tip() {
				uni.showToast({
					title: '没有相关权限！',
					icon: 'none'
				})
			}
		}
	}
</script>

<style>

</style>
